<script lang="tsx" setup>
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { Table, TableColumn } from '@/components/Table'
import { reactive, ref } from 'vue'
import { useTable } from '@/hooks/web/useTable'
import { FormSchema } from '@/components/Form'
import dialogBannerForm from './components/dialog-banner-form.vue'
import { ElMessage } from 'element-plus'
import * as BannerApi from '@/api/official-website/unit/banner'

const { t } = useI18n()

const schema = reactive<FormSchema[]>([
  {
    field: 'bannerName',
    label: '轮播图名称',
    component: 'Input'
  },
  {
    field: 'bannerType',
    label: '轮播图类型',
    component: 'Input'
  }
])

const columns: TableColumn[] = [
  {
    field: 'bannerName',
    label: '轮播图名称'
  },
  {
    field: 'bannerType',
    label: '轮播图类型',
    formatter: (row) => {
      return <div>{row.bannerType === 1 ? '图片' : '视频'}</div>
    }
  },
  {
    field: 'bannerUrl',
    label: '轮播图',
    formatter: (row) => {
      return (
        <div>
          <el-image src={row.bannerUrl}></el-image>
        </div>
      )
    }
  },
  {
    field: 'switchJump',
    label: '是否开启跳转',
    formatter: (row) => {
      return (
        <el-button size="small" type={row.switchJump === 0 ? 'success' : 'info'} plain>
          {row.switchJump === 0 ? '开启' : '关闭'}
        </el-button>
      )
    }
  },
  {
    field: 'jumpPage',
    label: '跳转地址'
  },
  {
    field: 'sortNo',
    label: '排序'
  },
  {
    field: 'action',
    label: '操作',
    formatter: (row: any) => {
      return (
        <div>
          <el-button type="primary" link onClick={() => openForm('update', row.id)}>
            编辑
          </el-button>
          <el-button type="danger" link onClick={() => deleteBanner(row.id)}>
            删除
          </el-button>
        </div>
      )
    }
  }
]

/** 表格相关方法 */
const {
  register: tableRegister,
  tableObject,
  tableMethods,
  elTableRef
} = useTable({
  getListApi: async (option: any) => {
    const { pageSize, pageNo, ...params } = option

    const newParams = Object.entries(params).reduce((prev, [key, value]) => {
      value && (prev[key] = value)
      return prev
    }, {})

    // 调用接口获取直播列表
    const res = await BannerApi.getPageBanner({ pageSize, pageNo, ...newParams })

    const data = res.list?.sort((prev, next) => prev.sortNo - next.sortNo)
    return {
      list: data,
      total: res.total
    }
  },
  delListApi: async (option: BannerApi.BannerDetail['id']) => {
    await BannerApi.deleteBanner(option)
    return {}
  }
})

const { getList, setSearchParams, delList } = tableMethods
getList()

/** 添加/修改操作 */
const formRef = ref<any>()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

// 删除banner
const deleteBanner = (id: string) => {
  BannerApi.deleteBanner(id).then((res) => {
    if (res) {
      ElMessage({
        message: '删除成功',
        type: 'success'
      })
      getList()
    }
  })
}
</script>

<template>
  <ContentWrap>
    <Search :schema="schema" @search="setSearchParams">
      <template #actionMore
        ><el-button type="primary" plain @click="openForm('create')">创建banner</el-button>
      </template>
    </Search></ContentWrap
  >
  <ContentWrap>
    <Table
      :columns="columns"
      v-model:pageSize="tableObject.pageSize"
      v-model:currentPage="tableObject.currentPage"
      :data="tableObject.tableList"
      :pagination="{
        total: tableObject.total
      }"
      @register="tableRegister"
    />
  </ContentWrap>

  <dialogBannerForm ref="formRef" @success="getList" />
</template>
